<template>
	<div>
		<h1>管理员列表</h1>
		<!-- <h1>{{adminsData}}</h1> -->
		<el-table :data="adminsData" style="width: 100%">
			<el-table-column label="序列号" width="240">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row._id }}</span>
				</template>
			</el-table-column>

			<el-table-column label="管理员账号">
				<template slot-scope="scope">
					<div slot="reference" class="name-wrapper">
						<!-- <el-tag size="medium"></el-tag> -->
						{{ scope.row.account }}
					</div>
				</template>
			</el-table-column>

			<el-table-column label="管理员状态">
				<template slot-scope="scope">
					<!-- {{scope.row}} -->
					<span v-if="scope.row.code">开启状态</span>
					<span v-else>禁用状态</span>
				</template>
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
						size="mini"
						@click="handleEdit(scope.$index, scope.row)"
						>修改</el-button
					>
					<el-button
						size="mini"
						type="danger"
						@click="handleDelete(scope.$index, scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
			<el-table-column label="属性">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="danger"
						@click="changeAdminsCode(scope.row)"
						v-if="scope.row.code"
						>禁用
					</el-button>
					<el-button
						size="mini"
						type="success"
						@click="changeAdminsCode(scope.row)"
						v-else
						>开启
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 修改弹框 -->
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
			<label for="">请输入新的账号:</label>
			<input type="text" v-model="from.account" /><br />
			<label for="">请输入新的密码:</label>
			<input type="text" v-model="from.password" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="cgan">isOK? </el-button>
			</span>
		</el-dialog>

		<div class="page">
			<span>
				当前第
				<select name="" id="">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
				</select>
				页
			</span>
			<button>首页</button>
			<button>上一页</button>
			<button>下一页</button>
			<button>尾页</button>
			<div class="total">总共有8条数据</div>
		</div>
	</div>
</template>

<script>
import axios from "../../http/axios";
import apis from "../../http/apis";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("admins");

export default {
	data() {
		return {
			from: {
				delivery: true,
				account: "",
				password: "",
				_id: "",
				deli: "",
			},
			dialogVisible: false,
		};
	},
	mounted() {
		this.getAdmins();
	},
	computed: {
		...mapState(["adminsData"]),
	},
	methods: {
		//获取
		...mapActions(["getAdmins", "changeAdminsCode"]),

		//修改
		handleEdit(index, row) {
			this._id = row._id;
			this.dialogVisible = true;
			this.from.account = row.account;
			this.from.password = row.password;
		},
		async cgan() {
			console.log(this._id, this.from.account, 222);
			//   console.log(22);
			this.dialogVisible = false;
			//   console.log(row, 555);
			const { data } = await axios({
				url: "/admins/changeAdmins",
				method: "post",
				data: {
					_id: this._id,
					account: this.from.account,
					password: this.from.password,
				},
			});
			console.log(data);
			if (data.state) {
				alert("数据修改成功");
				this.getAdmins();
			}
		},

		isUser(index, row) {
			console.log((row.delete = !row.delete));
			if ((row.delete = !row.delete)) {
				this.getAdmins();
			}
		},

		//删除
		async handleDelete(index, row) {
			const { data } = await axios({
				url: "/admins/delAdmins",
				method: "post",
				data: { _id: row._id },
			});
			console.log(data, 777);
			if (data.state) {
				alert("删除成功");
				this.getAdmins();
			}
		},
	},
};
</script>

<style scoped lang="scss">
table {
	/* border: 1px solid black; */
	width: 100%;
}
button {
	width: 80px;
}
.page {
	width: 100%;
	height: 60px;
	background: gainsboro;
	line-height: 60px;
	display: flex;
	align-items: center;
	span {
		// border: 1px solid black;
		display: block;
		// height: 40px;
	}
	button {
		height: 35px;
		margin-left: 20px;
	}
	.total {
		margin-left: 20px;
	}
}
</style>
